<template>
    <div class="main_content">
        <div class="left">
            <Input
                v-model="keyword"
                placeholder="请输入组织机构名称"
                style="width: 280px; margin-top: 10px"
                clearable />
            <input
                type="password"
                autocomplete="new-password"
                style="display: none" />
            <div class="btn">
                <el-button
                    icon="el-icon-plus"
                    @click="updateRow(0)"
                    type="primary"
                    v-if="auth.isAddDept"
                    size="small"
                    plain
                    >添加组织机构</el-button
                >
                <el-button
                    icon="el-icon-upload2"
                    size="small"
                    plain
                    type="primary"
                    style="margin-left: 50px"
                    @click="move(1)"
                    :disabled="moveUP"
                    v-if="auth.isUp"></el-button>
                <el-button
                    icon="el-icon-download"
                    size="small"
                    plain
                    type="primary"
                    @click="move(0)"
                    :disabled="moveDown"
                    v-if="auth.isDown"></el-button>
            </div>
            <div class="scorll">
                <el-tree
                    :data="treeList"
                    ref="treeBox"
                    node-key="id"
                    :render-content="renderContent"
                    :expand-on-click-node="false"
                    :highlight-current="true"
                    :filter-node-method="filterNode"
                    :default-expanded-keys="[checkId]"></el-tree>
            </div>
        </div>
        <div class="right">
            <el-tabs v-model="activeName">
                <el-tab-pane
                    label="组织成员"
                    name="first">
                    <div class="title">{{ userTitle }}:{{ totalCount }}人</div>
                    <div class="search">
                        <div class="list">
                            <el-button
                                icon="el-icon-plus"
                                type="primary"
                                style="width: 200px"
                                v-if="auth.isAddUser"
                                size="small"
                                plain
                                @click="updateUserRow(0)"
                                >添加账号</el-button
                            >
                            <Input
                                search
                                @on-search="searchUser"
                                v-model="userkeyword"
                                placeholder="请输入姓名/手机号"
                                style="width: 300px" />
                            <input
                                type="password"
                                autocomplete="new-password"
                                style="display: none" />
                        </div>
                    </div>
                    <div class="table">
                        <el-table
                            :data="userList"
                            :height="tableHeight">
                            <el-table-column
                                fixed="left"
                                prop="username"
                                label="用户名"></el-table-column>
                            <el-table-column
                                prop="nickname"
                                label="姓名"></el-table-column>
                            <el-table-column
                                prop="phone"
                                label="电话"></el-table-column>
                            <el-table-column
                                prop="status"
                                label="状态">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.status == 1">
                                        <!-- <Icon type="md-checkmark-circle" style="color:#ccc;font-size: 18px;"/> -->
                                        <span class="green">启用</span>
                                    </div>
                                    <div v-if="scope.row.status == 0">
                                        <!-- <img src="../../assets/images/sys/dept/disable.png" alt="" width="15" height="15" style="vertical-align: middle;"> -->
                                        <span class="red">禁用</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                fixed="right"
                                label="操作"
                                width="200px"
                                align="center">
                                <template slot-scope="scope">
                                    <el-switch
                                        v-model="scope.row.status"
                                        active-color="#13ce66"
                                        inactive-color="#999"
                                        @change="updateStatus(scope.row.status, scope.$index, userList, true)"
                                        v-if="auth.isEnable"
                                        v-preventReClick="1500"></el-switch>
                                    <el-button
                                        @click.native.prevent="updateUserRow(1, scope.$index, userList)"
                                        v-if="auth.isEditUser"
                                        type="text"
                                        size="small"
                                        >编辑</el-button
                                    >
                                    <el-button
                                        @click.native.prevent="resetpsw(scope.$index, userList)"
                                        v-if="auth.isReset"
                                        type="text"
                                        size="small"
                                        >重置密码</el-button
                                    >
                                    <el-button
                                        @click.native.prevent="removeUserRow(scope.$index, userList)"
                                        v-if="auth.isRemove"
                                        type="text"
                                        size="small"
                                        >移除</el-button
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div
                        class="clearfix"
                        v-show="userList.length > 0">
                        <div class="float-right">
                            <Page
                                v-if="totalCount"
                                style="margin-top: 20px; text-align: center"
                                :current.sync="current"
                                :total="totalCount"
                                :page-size="10"
                                show-elevator
                                show-total
                                show-sizer
                                @on-change="pageChange"
                                @on-page-size-change="pageSizeChange"></Page>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane
                    label="扩展信息"
                    name="second"
                    v-if="extraType == 0">
                    <div class="extra">
                        <div
                            class="top"
                            v-if="!isExtraFlag">
                            <h2>扩展信息（普通公司）</h2>
                            <div class="list">
                                <div class="item">
                                    <span>社会信用代码类型:</span>
                                    <span>{{ corpCodeType || "-" }}</span>
                                </div>
                                <div class="item">
                                    <span>单位代码:</span>
                                    <span>{{ corpCode || "-" }}</span>
                                </div>
                                <div class="item">
                                    <span>注册时间:</span>
                                    <span>{{ registerDate || "-" }}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item">
                                    <span>经营范围:</span>
                                    <span>{{ bizScope || "-" }}</span>
                                </div>
                                <div class="item">
                                    <span>法人姓名:</span>
                                    <span>{{ legalMan || "-" }}</span>
                                </div>
                                <div class="item">
                                    <span>法人电话:</span>
                                    <span>{{ legalManPhone || "-" }}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div
                                    class="item"
                                    style="width: 100%">
                                    <span>详细地址:</span>
                                    <span style="width: calc(100% - 120px)">{{ address || "暂无位置信息" }}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div
                                    class="item"
                                    style="width: 100%; height: 100%">
                                    <span>公司简介:</span>
                                    <span style="width: calc(100% - 120px)">{{ shortInfo || "-" }}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div
                                    class="item"
                                    style="width: 100%; height: 100%">
                                    <span>宣传图片:</span>
                                    <div
                                        v-if="fileList.length > 0"
                                        class="imgBox">
                                        <img
                                            :src="item"
                                            alt=""
                                            v-for="(item, index) in fileList"
                                            :key="index" />
                                    </div>
                                    <div
                                        v-else
                                        class="imgBox">
                                        暂无图片信息
                                    </div>
                                </div>
                            </div>
                            <h2>扩展信息（业主项目）</h2>
                            <div class="list">
                                <div class="item">
                                    <span>项目名称:</span>
                                    <span>{{ name || "-" }}</span>
                                </div>
                                <div class="item">
                                    <span>项目简称:</span>
                                    <span>{{ title || "-" }}</span>
                                </div>
                                <div class="item">
                                    <span>项目投资:</span>
                                    <span>{{ money + "万元" || "-" }}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item">
                                    <span>开工日期:</span>
                                    <span>{{ startDate || "-" }}</span>
                                </div>
                                <div class="item">
                                    <span>竣工日期:</span>
                                    <span>{{ completeDate || "-" }}</span>
                                </div>
                                <div class="item">
                                    <span>项目周期:</span>
                                    <span>{{ period + "个月" || "-" }}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item">
                                    <span>项目单位</span>
                                    <span v-show="unitList.length == 0">暂无项目单位</span>
                                </div>
                            </div>
                            <div
                                class="table"
                                v-show="unitList.length > 0">
                                <el-table
                                    :data="unitList"
                                    style="width: 100%">
                                    <el-table-column
                                        prop="type"
                                        label="单位类型"></el-table-column>
                                    <el-table-column
                                        prop="name"
                                        label="单位名称"></el-table-column>
                                </el-table>
                            </div>
                            <div class="list">
                                <div
                                    class="item"
                                    style="width: 100%; height: 100%">
                                    <span>项目简介:</span>
                                    <span style="width: calc(100% - 120px)">{{ projectInfo || "-" }}</span>
                                </div>
                            </div>
                        </div>
                        <div
                            class="top"
                            v-if="isExtraFlag">
                            <h2>扩展信息（普通公司）</h2>
                            <div class="list">
                                <div class="item">
                                    <span style="width: 120px">社会信用代码类型:</span>
                                    <el-radio
                                        v-model="corpCodeType"
                                        label="1"
                                        >社会信用代码</el-radio
                                    >
                                    <el-radio
                                        v-model="corpCodeType"
                                        label="2"
                                        >组织机构代码</el-radio
                                    >
                                </div>
                                <div class="item">
                                    <span>单位代码:</span>
                                    <Input
                                        v-model="corpCode"
                                        placeholder="请输入单位代码"
                                        style="width: 200px"
                                        clearable />
                                </div>
                                <div class="item">
                                    <span>注册时间:</span>
                                    <DatePicker
                                        :options="options"
                                        type="date"
                                        v-model="registerDate"
                                        @on-change="getRegisterDate"
                                        placeholder="请选择注册时间"
                                        style="width: 200px"></DatePicker>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item">
                                    <span>经营范围:</span>
                                    <Input
                                        v-model="bizScope"
                                        placeholder="请输入经营范围"
                                        style="width: 200px"
                                        clearable />
                                </div>
                                <div class="item">
                                    <span>法人姓名:</span>
                                    <Input
                                        v-model="legalMan"
                                        placeholder="请输入法人姓名"
                                        style="width: 200px"
                                        clearable />
                                </div>
                                <div class="item">
                                    <span>法人电话:</span>
                                    <Input
                                        v-model="legalManPhone"
                                        placeholder="请输入法人电话"
                                        style="width: 200px"
                                        clearable />
                                </div>
                            </div>
                            <div class="list">
                                <div
                                    class="item"
                                    style="width: 100%">
                                    <span class="tip">*</span>
                                    <span>详细地址:</span>
                                    <Input
                                        v-model="address"
                                        disabled
                                        placeholder="请选择地址"
                                        style="width: 500px"
                                        clearable />
                                    <el-button
                                        @click="getGPS"
                                        type="primary"
                                        size="small"
                                        plain
                                        style="margin-left: 10px"
                                        >点击选择</el-button
                                    >
                                </div>
                            </div>
                            <div class="list">
                                <div
                                    class="item"
                                    style="width: 100%; height: 100%">
                                    <span>公司简介:</span>
                                    <Input
                                        v-model="shortInfo"
                                        type="textarea"
                                        placeholder="请输入公司简介"
                                        style="width: calc(100% - 120px)"
                                        clearable />
                                </div>
                            </div>
                            <div class="list">
                                <div
                                    class="item"
                                    style="width: 100%; height: 100%">
                                    <span>宣传图片:</span>
                                    <div class="imgBox">
                                        <el-upload
                                            ref="uploadImg"
                                            :headers="headers"
                                            :action="$axios.defaults.baseURL + '/ms/api/project/uploadImg'"
                                            list-type="picture-card"
                                            accept="image/png, image/jpg, image/jpeg"
                                            :before-upload="beforeIMgUpload"
                                            :on-success="reportlogImgSuccess"
                                            :file-list="imgList"
                                            name="file"
                                            :limit="10"
                                            :on-exceed="exceedImg"
                                            :on-remove="handleReportRemove">
                                            <i class="el-icon-plus"></i>
                                        </el-upload>
                                    </div>
                                </div>
                            </div>
                            <h2>扩展信息（业主项目）</h2>
                            <div class="list">
                                <div class="item">
                                    <span class="tip">*</span>
                                    <span>项目名称:</span>
                                    <Input
                                        v-model="name"
                                        placeholder="请输入项目名称"
                                        style="width: 200px"
                                        clearable />
                                </div>
                                <div class="item">
                                    <span class="tip">*</span>
                                    <span>项目简称:</span>
                                    <Input
                                        v-model="title"
                                        placeholder="请输入项目简称"
                                        style="width: 200px"
                                        clearable />
                                </div>
                                <div class="item">
                                    <span>项目投资:</span>
                                    <Input
                                        v-model="money"
                                        :maxlength="moneyLengths"
                                        show-word-limit
                                        placeholder="请输入项目投资"
                                        style="width: 180px"
                                        clearable />万元
                                </div>
                            </div>
                            <div class="list">
                                <div class="item">
                                    <span>开工日期:</span>
                                    <DatePicker
                                        type="date"
                                        v-model="startDate"
                                        placeholder="请选择开工日期"
                                        @on-change="getStartDate"
                                        style="width: 200px"></DatePicker>
                                </div>
                                <div class="item">
                                    <span>竣工日期:</span>
                                    <DatePicker
                                        type="date"
                                        v-model="completeDate"
                                        placeholder="请选择竣工日期"
                                        @on-change="getCompleteDate"
                                        style="width: 200px"></DatePicker>
                                </div>
                                <div class="item">
                                    <span>项目周期:</span>
                                    <Input
                                        v-model="period"
                                        placeholder="请输入项目周期"
                                        style="width: 180px"
                                        clearable />个月
                                </div>
                            </div>
                            <div class="list">
                                <div class="item">
                                    <span>项目单位</span>
                                    <el-button
                                        @click="addUnit"
                                        type="primary"
                                        size="small"
                                        plain
                                        >+单位</el-button
                                    >
                                </div>
                            </div>
                            <div
                                class="table"
                                v-show="unitList.length > 0">
                                <table class="create-table">
                                    <el-table
                                        :data="unitList"
                                        style="width: 96%; margin: 0 auto">
                                        <el-table-column label="单位类型">
                                            <template slot-scope="scope">
                                                <Input
                                                    v-model="scope.row.type"
                                                    placeholder="请输入单位类型"
                                                    clearable />
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="单位名称">
                                            <template slot-scope="scope">
                                                <Input
                                                    v-model="scope.row.name"
                                                    placeholder="请输入单位名称"
                                                    clearable />
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作">
                                            <template slot-scope="scope">
                                                <el-button
                                                    style="color: red"
                                                    @click.native.prevent="remove(scope.$index, 1)"
                                                    type="text"
                                                    size="small"
                                                    >删除</el-button
                                                >
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </table>
                            </div>
                            <div class="list">
                                <div
                                    class="item"
                                    style="width: 100%; height: 100%">
                                    <span>项目简介:</span>
                                    <Input
                                        v-model="projectInfo"
                                        type="textarea"
                                        placeholder="请输入项目简介"
                                        style="width: calc(100% - 120px)"
                                        clearable />
                                </div>
                            </div>
                        </div>
                        <div class="bottom">
                            <el-button
                                @click="cancel(6)"
                                type="info"
                                v-if="isExtraFlag"
                                size="small"
                                plain
                                >取消</el-button
                            >
                            <el-button
                                @click="extraSub"
                                v-if="isExtraFlag"
                                type="primary"
                                size="small"
                                plain
                                v-preventReClick="1500"
                                >确定</el-button
                            >
                            <el-button
                                @click="extraEdit"
                                v-if="!isExtraFlag"
                                type="primary"
                                size="small"
                                plain
                                v-preventReClick="1500"
                                >编辑</el-button
                            >
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <Modal
            v-model="deleteModal"
            title="删除"
            width="360px;"
            :mask-closable="false">
            <div style="margin: 10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button
                    @click="cancel(2)"
                    type="info"
                    size="small"
                    plain
                    >取消</el-button
                >
                <el-button
                    @click="detele"
                    type="primary"
                    size="small"
                    plain
                    v-preventReClick="1500"
                    >确定</el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="modal"
            :title="isAdd ? '添加组织机构' : '编辑组织机构'"
            :mask-closable="false">
            <div>
                <div class="item2">
                    <span class="tip">*</span>
                    <span>机构名称:</span>
                    <Input
                        v-model="deptName"
                        placeholder="请输入机构名称"
                        style="width: 300px"
                        clearable />
                </div>
                <div
                    class="item2"
                    v-if="isAdd">
                    <span class="tip">*</span>
                    <span>机构类型:</span>
                    <Select
                        v-model="deptType"
                        style="width: 300px"
                        remote
                        filterable
                        placeholder="请选择机构类型">
                        <Option
                            v-for="item in typeList"
                            :value="item.id"
                            :key="item.id"
                            >{{ item.name }}</Option
                        >
                    </Select>
                </div>
                <div
                    class="item2"
                    v-if="isAdd">
                    <span class="tip">*</span>
                    <span>上级组织机构:</span>
                    <treeselect
                        :options="treeData"
                        placeholder="搜索选择组织机构"
                        @select="getdept"
                        style="width: 300px"
                        :normalizer="normalizer" />
                </div>
            </div>
            <div slot="footer">
                <el-button
                    @click="cancel(1)"
                    type="info"
                    size="small"
                    plain
                    >取消</el-button
                >
                <el-button
                    @click="submitAll"
                    type="primary"
                    size="small"
                    plain
                    v-preventReClick="1500"
                    >保存</el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="pswModal"
            title="重置密码"
            width="520px;"
            :mask-closable="false">
            <!-- <div style="margin:10px">确定要删除这条数据吗？</div> -->
            <div class="item2">
                <span class="tip">*</span>
                <span>密码:</span>
                <Input
                    v-model="psw"
                    placeholder="请输入密码"
                    style="width: 300px"
                    type="password"
                    clearable />
            </div>
            <div class="item2">
                <span class="tip">*</span>
                <span>确认密码:</span>
                <Input
                    v-model="pswagain"
                    placeholder="请确认密码"
                    style="width: 300px"
                    type="password"
                    clearable />
            </div>
            <div slot="footer">
                <el-button
                    @click="cancel(3)"
                    type="info"
                    size="small"
                    plain
                    >取消</el-button
                >
                <el-button
                    @click="reset(true)"
                    type="primary"
                    size="small"
                    plain
                    v-preventReClick="1500"
                    >确定</el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="deleteuserModal"
            title="移除"
            width="360px;"
            :mask-closable="false">
            <div style="margin: 10px">确定要移除这条数据吗？</div>
            <div slot="footer">
                <el-button
                    @click="cancel(4)"
                    type="info"
                    size="small"
                    plain
                    >取消</el-button
                >
                <el-button
                    @click="removeUser"
                    type="primary"
                    size="small"
                    plain
                    v-preventReClick="1500"
                    >确定</el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="userModal"
            :mask-closable="false"
            width="900px;">
            <Tabs v-model="tabActiveName">
                <TabPane
                    :label="isAdd ? '添加新账号' : '编辑账号'"
                    name="1">
                    <div class="top">
                        <div class="list">
                            <div class="item2">
                                <span class="tip">*</span>
                                <span>用户名:</span>
                                <Input
                                    v-model="username"
                                    placeholder="请输入账号编号"
                                    :maxlength="lengths"
                                    show-word-limit
                                    style="width: 300px"
                                    clearable />
                            </div>
                            <div class="item2">
                                <span class="tip">*</span>
                                <span>姓名:</span>
                                <Input
                                    v-model="nickname"
                                    placeholder="请输入姓名"
                                    :maxlength="lengths"
                                    show-word-limit
                                    style="width: 300px"
                                    clearable />
                            </div>
                        </div>
                        <div class="list">
                            <div
                                class="item2"
                                v-if="isAdd == true">
                                <span class="tip">*</span>
                                <span>密码:</span>
                                <Input
                                    v-model="password"
                                    placeholder="请输入密码"
                                    style="width: 300px"
                                    type="password"
                                    clearable />
                            </div>
                            <div
                                class="item2"
                                v-if="isAdd == true">
                                <span class="tip">*</span>
                                <span>确认密码:</span>
                                <Input
                                    v-model="passwordagain"
                                    placeholder="请确认密码"
                                    style="width: 300px"
                                    type="password"
                                    clearable />
                            </div>
                        </div>
                        <div class="list">
                            <div class="item2">
                                <span class="tip">*</span>
                                <span>手机号:</span>
                                <Input
                                    v-model="phone"
                                    placeholder="请输入手机号"
                                    style="width: 300px"
                                    clearable />
                            </div>
                            <div class="item2">
                                <span>邮箱:</span>
                                <Input
                                    v-model="email"
                                    placeholder="请输入邮箱"
                                    style="width: 300px"
                                    clearable />
                            </div>
                        </div>
                        <div class="list">
                            <div class="item2">
                                <span class="tip">*</span>
                                <span>账号类型:</span>
                                <div style="width: 300px">
                                    <el-radio
                                        v-model="type"
                                        label="2"
                                        >普通账号</el-radio
                                    >
                                    <el-radio
                                        v-model="type"
                                        label="3"
                                        >体验账号</el-radio
                                    >
                                </div>
                            </div>
                            <div
                                class="item2"
                                v-if="typeFlag">
                                <span class="tip">*</span>
                                <span>有效期限:</span>
                                <div style="width: 300px">
                                    <DatePicker
                                        type="date"
                                        placeholder="请选择有限期限"
                                        style="width: 200px"
                                        v-model="expireTime"
                                        :options="options1"
                                        @on-change="getTime"
                                        :transfer="true"></DatePicker>
                                    <span
                                        v-if="textFlag"
                                        style="color: red"
                                        >已过期</span
                                    >
                                </div>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item2">
                                <span class="tip">*</span>
                                <span>项目角色:</span>
                                <Select v-model="userType" style="width:300px" placeholder="请选择项目角色" :filterable="true" >
                                    <Option v-for="item in ProjectRoleList" :value="item.value" :key="item.value" >{{ item.title }}</Option>
                                </Select>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <p style="margin: 10px 0; font-size: 18px; color: var(--themeColor)">账号角色</p>
                    <div class="bottom">
                        <CheckboxGroup v-model="roleIds">
                            <Checkbox
                                v-for="(val, index) in roleList"
                                :key="index"
                                :label="val.id"
                                style="width: 220px">
                                <span>{{ val.name }}</span>
                            </Checkbox>
                        </CheckboxGroup>
                    </div>
                </TabPane>
                <TabPane
                    label="选择已有帐号"
                    name="2"
                    v-if="isAdd">
                    <div class="imp">
                        <Input
                            search
                            v-model="impKeyword"
                            placeholder="请输入姓名/用户名/手机号"
                            style="width: 300px"
                            clearable />
                        <!-- <Checkbox v-model="single" @on-change="getSingle">只查看已勾选的人员</Checkbox>  -->
                    </div>
                    <div
                        class="table"
                        style="width: 96%; margin: 0 auto">
                        <el-table
                            ref="reftable"
                            :data="importList"
                            style="width: 100%"
                            height="300"
                            @select="listSelectOne"
                            @select-all="listSelectALL">
                            <el-table-column
                                type="selection"
                                width="55"
                                align="center"></el-table-column>
                            <el-table-column
                                fixed="left"
                                prop="username"
                                label="用户名"></el-table-column>
                            <el-table-column
                                prop="nickname"
                                label="姓名"></el-table-column>
                            <el-table-column
                                prop="phone"
                                label="电话"></el-table-column>
                        </el-table>
                    </div>
                    <p style="margin: 10px 0; font-size: 18px; color: var(--themeColor)">账号角色</p>
                    <div class="bottom">
                        <CheckboxGroup v-model="improleIds">
                            <Checkbox
                                v-for="(val, index) in roleList"
                                :key="index"
                                :label="val.id"
                                style="width: 220px">
                                <span>{{ val.name }}</span>
                            </Checkbox>
                        </CheckboxGroup>
                    </div>
                </TabPane>
            </Tabs>
            <div slot="footer">
                <el-button
                    @click="cancel(5)"
                    type="info"
                    size="small"
                    plain
                    >取消</el-button
                >
                <el-button
                    @click="addUser"
                    type="primary"
                    size="small"
                    plain
                    v-preventReClick="1500"
                    >确定</el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="gpsModal"
            title="选择公司位置"
            width="1000px"
            :mask-closable="false">
            <div class="msg">
                <div style="width: 900px; height: 500px; margin: 10px auto; position: relative">
                    <div
                        id="container"
                        class="container"></div>
                    <div class="searchAddress">
                        <Input
                            search
                            enter-button
                            placeholder="请输入准确的项目地址"
                            style="width: 300px"
                            @on-search="searchAddress"
                            v-model="ads"
                            clearable />
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button
                    @click="cancel(7)"
                    size="small"
                    plain
                    >取消</el-button
                >
                <el-button
                    type="primary"
                    @click="submitGPS"
                    size="small"
                    plain
                    >确定</el-button
                >
            </div>
        </Modal>
    </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
import { toTree, trans, treeSort } from "@/sever/config.js"
import { extra } from "./extra"
import {
    getAlldeptList,
    getDeptRemove,
    getDeptAdd,
    getDeptEdit,
    getDeptUserAdd,
    getDeptUserImport,
    getDeptUserEdit,
    getDeptUserRemove,
    getUserList,
    getUserResetPassword,
    getUserImporList,
    getDeptMove,
} from "@/api/api.js"
import { initSys } from "@/mixins/sys.js"
export default {
    mixins: [initSys, extra],
    components: { Treeselect },
    data() {
        return {
            headers: {
                Authorization: localStorage.getItem("COOKIE"),
            },
            totalCount: 0,
            current: 1,
            pageNum: 1,
            pageSize: 10,
            keyword: "",
            roleId: "",
            deptId: "",
            modal: false,
            isAdd: true,
            deleteModal: false,
            treeData: [],
            userList: [],
            AllRolesList: [],
            deptpid: "",
            deptType: "",
            ids: "",
            treeids: "",
            deptName: "",
            id: "",
            typeList: [
                {
                    id: 0,
                    name: "公司",
                },
                {
                    id: 1,
                    name: "项目",
                },
            ],
            list: [],
            listdata: [],
            btnList: [],
            userkeyword: "",
            userTitle: "",
            userList: [],
            tableHeight: window.innerHeight - 395,
            removeId: "",
            deleteuserModal: false,
            tabActiveName: "1",
            roleIds: [],
            treeList: [],
            importList: [],
            impKeyword: "",
            single: false,
            improleIds: [],
            improtUserList: [],
            impAllList: [],
            moveUP: false,
            moveDown: false,
            result: [],
            checkId: "",
            activeName: "first",
            lengths: 35,
            moneyLengths: 10,
            auth: {
                isUp: false,
                isDown: false,
                isEnable: false,
                isEditUser: false,
                isAddUser: false,
                isReset: false,
                isRemove: false,
                isAddDept: false,
                isDelDept: false,
                isEditDept: false,
            },
            options1: {
                disabledDate(date) {
                    return date && date.valueOf() < Date.now()
                },
            },

            normalizer(node) {
                //去掉children=null的属性
                if (node.children == null || node.children == "null") {
                    delete node.children
                }
            },

            // 项目角色 0业主人员-1监理人员-2总包人员-3分包人员-4普通人员
            userType: 4,
            ProjectRoleList: [
                {value: 0, title: '业主人员'},
                {value: 1, title: '监理人员'},
                {value: 2, title: '总包人员'},
                {value: 3, title: '分包人员'},
                {value: 4, title: '普通人员'},
            ]
        }
    },
    watch: {
        type(vlaue, oldvalue) {
            if (vlaue == 2) {
                this.typeFlag = false
            } else if (vlaue == 3) {
                this.typeFlag = true
            }
        },
        impKeyword(val) {
            if (val == "") {
                this.importList = this.impAllList
            } else {
                this.importList = []
                this.impAllList.forEach((i) => {
                    if (i.phone.indexOf(val) != -1 || i.nickname.indexOf(val) != -1 || i.username.indexOf(val) != -1) {
                        this.importList.push(i)
                    }
                })
            }
        },
        keyword(val) {
            this.$refs.treeBox.filter(val)
        },
    },
    methods: {
        initAuth() {
            this.auth.isUp = this.btnList.includes("sys/dept/up")
            this.auth.isDown = this.btnList.includes("sys/dept/down")
            this.auth.isEnable = this.btnList.includes("sys/deptUser/enable")
            this.auth.isEditUser = this.btnList.includes("sys/deptUser/edit")
            this.auth.isAddUser = this.btnList.includes("sys/deptUser/add")
            this.auth.isReset = this.btnList.includes("sys/deptUser/reset")
            this.auth.isRemove = this.btnList.includes("sys/deptUser/remove")
            this.auth.isAddDept = this.btnList.includes("sys/dept/add")
            this.auth.isDelDept = this.btnList.includes("sys/dept/del")
            this.auth.isEditDept = this.btnList.includes("sys/dept/edit")
        },
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        getSingle(type) {
            if (type) {
                this.importList = this.improtUserList
            } else {
                this.importList = this.impAllList
            }
            this.improtUserList.filter((i) => {
                this.$nextTick(() => {
                    this.$refs.reftbale.toggleRowSelection(i, true)
                })
            })
        },
        //组织机构排序
        move(type) {
            let arr = []
            for (let i = 0; i < this.result.length; i++) {
                if (this.result[i].id == this.deptId) {
                    if (type == 1) {
                        arr = [this.deptId, this.result[i - 1].id]
                    } else if (type == 0) {
                        arr = [this.deptId, this.result[i + 1].id]
                    }
                }
            }
            let params = {
                deptIds: arr,
            }
            getDeptMove(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.getuserList("")
                        this.$Message.success("排序成功")
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        //获取已有账号
        getImportList() {
            let params = {
                deptId: this.deptId,
                pageSize: 10000,
                pageNum: 1,
                keyword: this.impKeyword,
            }
            getUserImporList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.importList = res.data.list
                        this.impAllList = res.data.list
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        //多选
        listSelectOne(selection, row) {
            this.improtUserList = selection
        },
        //全选
        listSelectALL(selection) {
            this.improtUserList = selection
        },
        renderContent(h, { root, node, data }) {
            if (data.type == 0) {
                // 1.编辑和删除按钮都存在
                if (this.auth.isDelDept && this.auth.isEditDept) {
                    return (
                        <span class="custom-tree-node">
                            <p>
                                <span class="sub">公</span>
                                <span
                                    class="title"
                                    on-click={() => this.getTreeId(data, node)}>
                                    {data.label}
                                </span>
                            </p>
                            <span class="btn">
                                <i
                                    class="el-icon-edit-outline"
                                    style="color:#1891ff"
                                    on-click={() => this.updateRow(1, data)}></i>
                                <i
                                    class="el-icon-delete"
                                    style="color:red"
                                    on-click={() => this.removeRow(data)}></i>
                            </span>
                        </span>
                    )
                } else if (!this.auth.isDelDept && this.auth.isEditDept) {
                    // 3.编辑按钮存在删除按钮不存在
                    return (
                        <span class="custom-tree-node">
                            <p>
                                <span class="sub">公</span>
                                <span
                                    class="title"
                                    on-click={() => this.getTreeId(data, node)}>
                                    {data.label}
                                </span>
                            </p>
                            <span class="btn">
                                <i
                                    class="el-icon-edit-outline"
                                    style="color:#1891ff"
                                    on-click={() => this.updateRow(1, data)}></i>
                                <i
                                    class="el-icon-delete"
                                    style="cursor: not-allowed"></i>
                            </span>
                        </span>
                    )
                } else if (this.auth.isDelDept && !this.auth.isEditDept) {
                    // 4.删除按钮存在编辑按钮不存在
                    return (
                        <span class="custom-tree-node">
                            <p>
                                <span class="sub">公</span>
                                <span
                                    class="title"
                                    on-click={() => this.getTreeId(data, node)}>
                                    {data.label}
                                </span>
                            </p>
                            <span class="btn">
                                <i
                                    class="el-icon-edit-outline"
                                    style="cursor: not-allowed"></i>
                                <i
                                    class="el-icon-delete"
                                    style="color:red"
                                    on-click={() => this.removeRow(data)}></i>
                            </span>
                        </span>
                    )
                } else if (!this.auth.isDelDept && !this.auth.isEditDept) {
                    // 2.编辑删除按钮都不存在
                    return (
                        <span class="custom-tree-node">
                            <p>
                                <span class="sub">公</span>
                                <span
                                    class="title"
                                    on-click={() => this.getTreeId(data, node)}>
                                    {data.label}
                                </span>
                            </p>
                            <span class="btn">
                                <i
                                    class="el-icon-edit-outline"
                                    style="cursor: not-allowed"></i>
                                <i
                                    class="el-icon-delete"
                                    style="cursor: not-allowed"></i>
                            </span>
                        </span>
                    )
                }
            } else if (data.type == 1) {
                // 1.编辑和删除按钮都存在
                if (this.auth.isDelDept && this.auth.isEditDept) {
                    return (
                        <span class="custom-tree-node">
                            <p>
                                <span class="sub">项</span>
                                <span
                                    class="title"
                                    on-click={() => this.getTreeId(data, node)}>
                                    {data.label}
                                </span>
                            </p>
                            <span class="btn">
                                <i
                                    class="el-icon-edit-outline"
                                    style="color:#1891ff"
                                    on-click={() => this.updateRow(1, data)}></i>
                                <i
                                    class="el-icon-delete"
                                    style="color:red"
                                    on-click={() => this.removeRow(data)}></i>
                            </span>
                        </span>
                    )
                } else if (!this.auth.isDelDept && this.auth.isEditDept) {
                    // 3.编辑按钮存在删除按钮不存在
                    return (
                        <span class="custom-tree-node">
                            <p>
                                <span class="sub">项</span>
                                <span
                                    class="title"
                                    on-click={() => this.getTreeId(data, node)}>
                                    {data.label}
                                </span>
                            </p>
                            <span class="btn">
                                <i
                                    class="el-icon-edit-outline"
                                    style="color:#1891ff"
                                    on-click={() => this.updateRow(1, data)}></i>
                                <i
                                    class="el-icon-delete"
                                    style="cursor: not-allowed"></i>
                            </span>
                        </span>
                    )
                } else if (this.auth.isDelDept && !this.auth.isEditDept) {
                    // 4.删除按钮存在编辑按钮不存在
                    return (
                        <span class="custom-tree-node">
                            <p>
                                <span class="sub">项</span>
                                <span
                                    class="title"
                                    on-click={() => this.getTreeId(data, node)}>
                                    {data.label}
                                </span>
                            </p>
                            <span class="btn">
                                <i
                                    class="el-icon-edit-outline"
                                    style="cursor: not-allowed"></i>
                                <i
                                    class="el-icon-delete"
                                    style="color:red"
                                    on-click={() => this.removeRow(data)}></i>
                            </span>
                        </span>
                    )
                } else if (!this.auth.isDelDept && !this.auth.isEditDept) {
                    // 2.编辑删除按钮都不存在
                    return (
                        <span class="custom-tree-node">
                            <p>
                                <span class="sub">项</span>
                                <span
                                    class="title"
                                    on-click={() => this.getTreeId(data, node)}>
                                    {data.label}
                                </span>
                            </p>
                            <span class="btn">
                                <i
                                    class="el-icon-edit-outline"
                                    style="cursor: not-allowed"></i>
                                <i
                                    class="el-icon-delete"
                                    style="cursor: not-allowed"></i>
                            </span>
                        </span>
                    )
                }
            }
        },
        search() {
            this.getuserList("")
        },
        searchUser() {
            this.getALLlist()
        },
        getALLlist() {
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                keyword: this.userkeyword,
                deptId: this.deptId,
            }
            getUserList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.userList = res.data.list
                        this.userList.forEach((i) => {
                            if (i.status == 0) {
                                i.status = false
                            } else {
                                i.status = true
                            }
                        })
                        this.totalCount = res.data.total
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        pageChange(index) {
            this.pageNum = index
            this.getALLlist()
        },
        pageSizeChange(index) {
            this.pageSize = index
            this.getALLlist()
        },

        updateUserRow(type, index, rows) {
            this.roleIds = []
            this.tabActiveName = "1"
            this.userType = 4
            if (type == 0) {
                this.isAdd = true
                this.username = ""
                this.impKeyword = ""
                this.nickname = ""
                this.password = ""
                this.passwordagain = ""
                this.phone = ""
                this.email = ""
                this.type = "2"
                this.expireTime = ""
                this.getImportList()
                this.improleIds = []
            } else if (type == 1) {
                this.isAdd = false
                this.id = rows[index].id
                this.getUserDetails(this.id)
                this.getUserRoles(this.id, this.deptId)
            }
            this.userModal = true
        },
        addUser() {
            if (this.tabActiveName == 1) {
                var reg = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$")
                if (this.username === "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "用户名不能为空",
                    })
                    return
                }
                if (this.nickname === "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "姓名不能为空",
                    })
                    return
                }
                if (this.phone == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "手机号不能为空",
                    })
                    return
                }
                if (this.phone != "") {
                    if (!(/^1[3456789]\d{9}$/.test(this.phone) || /^[0-9]{8}$/.test(this.phone))) {
                        this.$Modal.warning({
                            title: "您有必填字段",
                            content: "请填写正确的手机号",
                        })
                        return
                    }
                }
                if (this.email == undefined) {
                    this.email = ""
                }
                if (this.email != "") {
                    if (!reg.test(this.email)) {
                        this.$Modal.warning({
                            title: "您有必填字段",
                            content: "请填写正确的邮箱号码",
                        })
                        return
                    }
                }
                if (this.type == 3) {
                    if (this.expireTime == "") {
                        this.$Modal.warning({
                            title: "您有必填字段",
                            content: "请选择到期时间",
                        })
                        return
                    }
                }
                if (this.roleIds.length == 0) {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请选择账号角色",
                    })
                    return
                }
                if (this.isAdd) {
                    if (this.password === "" || this.passwordagain === "") {
                        this.$Modal.warning({
                            title: "您有必填字段",
                            content: "密码不能为空",
                        })
                        return
                    }
                    if (this.password != this.passwordagain) {
                        this.$Modal.warning({
                            title: "错误",
                            content: "两次输入的密码不一致",
                        })
                        return
                    }
                    let params = {
                        username: this.username,
                        password: this.password,
                        nickname: this.nickname,
                        phone: this.phone,
                        email: this.email,
                        deptId: this.deptId,
                        type: Number(this.type),
                        expireTime: this.type == 2 ? "" : this.expireTime,
                        roleIds: this.roleIds,
                        userType: this.userType,
                    }
                    getDeptUserAdd(params)
                        .then((res) => {
                            if (res.code == 200) {
                                this.userModal = false
                                this.$Message.success("操作成功")
                                this.pageNum = 1
                                this.current = 1
                                this.getuserList(this.deptId)
                            } else {
                                this.$Message.warning(res.msg)
                            }
                        })
                        .catch((error) => {
                            console.log(error)
                        })
                } else {
                    let params = {
                        deptId: this.deptId,
                        userId: this.id,
                        username: this.username,
                        nickname: this.nickname,
                        phone: this.phone,
                        email: this.email,
                        type: Number(this.type),
                        expireTime: this.type == 2 ? "" : this.expireTime,
                        roleIds: this.roleIds,
                        userType: this.userType,
                    }
                    getDeptUserEdit(params)
                        .then((res) => {
                            if (res.code == 200) {
                                this.userModal = false
                                this.$Message.success("操作成功")
                                this.current = 1
                                this.pageNum = 1
                                this.getuserList(this.deptId)
                            } else {
                                this.$Message.warning(res.msg)
                            }
                        })
                        .catch((error) => {
                            console.log(error)
                        })
                }
            } else if (this.tabActiveName == 2) {
                if (this.improtUserList.length == 0) {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请选择账号",
                    })
                    return
                }
                if (this.improleIds.length == 0) {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请选择账号角色",
                    })
                    return
                }
                let arr = []
                this.improtUserList.forEach((i) => {
                    arr.push(i.id)
                })
                let params = {
                    deptId: this.deptId,
                    userIds: arr,
                    roleIds: this.improleIds,
                }
                getDeptUserImport(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.userModal = false
                            this.$Message.success("操作成功")
                            this.pageNum = 1
                            this.current = 1
                            this.getuserList(this.deptId)
                        } else {
                            this.$Message.warning(res.msg)
                        }
                    })
                    .catch((error) => {
                        console.log(error)
                    })
            }
        },
        removeUserRow(index, rows) {
            this.deleteuserModal = true
            this.removeId = rows[index].id
        },
        removeUser() {
            let params = {
                deptId: this.deptId,
                userId: this.removeId,
            }
            getDeptUserRemove(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功")
                        this.pageNum = 1
                        this.current = 1
                        this.userkeyword = ""
                        this.getuserList(this.deptId)
                        this.deleteuserModal = false
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        getuserList(id) {
            let params = {
                keyword: this.keyword,
            }
            getAlldeptList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.list = res.data.list
                        this.treeData = trans(this.list)
                        let arr = []
                        if (this.list.length == 1 && this.list[0].id == 0) {
                            if (this.list[0].children && this.list[0].children.length > 0) {
                                arr = this.list[0].children
                            } else {
                                arr = this.list
                            }
                        } else {
                            arr = this.list
                        }
                        this.treeList = treeSort(trans(arr))
                        if (id == "") {
                            this.deptId = this.treeList[0].id
                            this.extraType = this.treeList[0].type
                        } else {
                            this.deptId = id || this.deptId
                        }
                        if (this.extraType == 0) {
                            this.getExtra(this.deptId)
                        } else {
                            this.activeName = "first"
                        }
                        this.userTitle = this.treeList[0].title || this.userTitle
                        this.$nextTick(() => {
                            // treeBox 元素的ref   value 绑定的node-key
                            this.$refs.treeBox.setCurrentKey(this.deptId)
                        })
                        this.moveUP = true
                        this.result = this.treeList
                        //数组长度小于二时，禁用上移下移按钮
                        if (this.treeList.length < 2) {
                            this.moveDown = true
                        }
                        this.checkId = this.treeList[0].id
                        this.getALLlist()
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        findActive(arr, id) {
            let len = arr.length
            for (let i = 0; i < len; i++) {
                if (arr[i].id == id) {
                    if (len < 2) {
                        this.moveUP = true
                        this.moveDown = true
                    } else {
                        if (i == 0) {
                            this.moveUP = true
                            this.moveDown = false
                        } else if (i == len - 1) {
                            this.moveDown = true
                            this.moveUP = false
                        } else {
                            this.moveUP = false
                            this.moveDown = false
                        }
                    }
                } else {
                    if (arr[i].children && arr[i].children.length > 0) {
                        this.findActive(arr[i].children, this.deptId)
                    }
                }
            }
        },
        findsID(arr, pid) {
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].id == pid) {
                    this.result = arr[i].children
                } else {
                    if (arr[i].children && arr[i].children.length > 0) {
                        this.findId(arr[i].children, pid)
                    }
                }
            }
        },
        findId(arr, pid) {
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].id == pid) {
                    this.result = arr[i].children
                } else {
                    if (arr[i].children && arr[i].children.length > 0) {
                        this.findsID(arr[i].children, pid)
                    }
                }
            }
        },
        getTreeId(data, node, obj) {
            if (data.pid == 0) {
                this.result = this.treeList
            } else {
                this.findId(this.treeList, data.pid)
            }
            this.deptId = data.id
            this.extraType = data.type
            this.userTitle = data.title
            this.checkId = data.id
            if (this.extraType == 0) {
                this.getExtra(this.deptId)
            } else {
                this.activeName = "first"
            }
            this.findActive(this.treeList, this.deptId)
            this.getALLlist()
        },
        removeRow(data) {
            this.deleteModal = true
            this.ids = data.id
        },
        detele() {
            getDeptRemove(this.ids)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功")
                        this.pageNum = 1
                        this.current = 1
                        this.keyword = ""
                        this.getALLlist()
                        this.getuserList("")
                        this.deleteModal = false
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        cancel(type) {
            if (type === 1) {
                this.modal = false
            } else if (type === 2) {
                this.deleteModal = false
            } else if (type == 3) {
                this.pswModal = false
            } else if (type == 4) {
                this.deleteuserModal = false
            } else if (type == 5) {
                this.userModal = false
            } else if (type == 6) {
                this.isExtraFlag = false
                this.getExtra(this.deptId)
            } else if (type == 7) {
                this.lng = this.adsLng || ""
                this.lat = this.adsLat || ""
                this.ads = this.address || "暂无位置信息"
                this.gpsModal = false
            }
        },
        getdept(index) {
            this.deptpid = index.id
        },
        updateRow(type, data) {
            this.modal = true
            if (type == 0) {
                this.isAdd = true
                this.deptpid = ""
                this.deptName = ""
                this.deptType = ""
            } else {
                this.isAdd = false
                this.id = data.id
                this.deptpid = data.id
                this.deptName = data.name
                this.deptType = data.type
            }
        },
        submitAll() {
            if (this.deptType === "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "机构类型不能为空",
                })
                return
            }
            if (this.deptName === "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "机构名称不能为空",
                })
                return
            }
            if (this.deptpid === "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请选择上级组织机构",
                })
                return
            }
            if (this.isAdd) {
                let params = {
                    pid: this.deptpid,
                    name: this.deptName,
                    type: this.deptType,
                }
                getDeptAdd(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.deptId = this.deptpid
                            this.success()
                        } else {
                            this.$Message.warning(res.msg)
                        }
                    })
                    .catch((error) => {
                        console.log(error)
                    })
            } else {
                let params = {
                    name: this.deptName,
                    deptId: this.id,
                }
                getDeptEdit(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.userTitle = this.deptName
                            this.success()
                        } else {
                            this.$Message.warning(res.msg)
                        }
                    })
                    .catch((error) => {
                        console.log(error)
                    })
            }
        },
        success() {
            this.$Message.success("操作成功")
            this.modal = false
            this.pageNum = 1
            this.current = 1
            this.getALLlist()
            this.getuserList("")
        },
    },
    mounted() {
        this.getuserList("")
        this.getRoleList("", "", false)
        this.btnList = JSON.parse(localStorage.getItem("arr"))
        this.initAuth() //初始化权限
    },
}
</script>

<style lang="less" scoped>
@import "./../../assets/style/themeBase.less";

.main_content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    display: flex;
    .left {
        width: 300px;
        height: 100%;
        padding: 10px;
        margin-right: 10px;
        background: #fff;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        .btn {
            width: 280px;
            margin-top: 20px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    .right {
        flex: 1;
        height: 100%;
        overflow: hidden;
        background: #fff;
        border-radius: 10px;
        padding: 10px;
        /deep/.el-radio {
            margin-right: 10px;
        }
        /deep/.el-tabs {
            height: 100%;
            width: 100%;
            .el-tabs__content {
                height: calc(100% - 40px);
                width: 100%;
                .el-tab-pane {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .title {
            font-size: 18px;
            height: 40px;
            line-height: 40px;
        }
        .search {
            background: #f2f2f2;
            height: 60px;
            margin-bottom: 20px;
            .list {
                width: 96%;
                height: 60px;
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
        }
        .extra {
            width: 100%;
            height: 100%;
            .top {
                width: 100%;
                height: calc(100% - 80px);
                overflow-y: hidden;
                h2 {
                    width: 98%;
                    margin: 0 auto;
                    height: 40px;
                    font-size: 14px;
                    font-weight: 400;
                    color: var(--themeColor);
                    line-height: 40px;
                }
                .list {
                    width: 95%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: 0 auto 10px;

                    .item {
                        width: 330px;
                        height: 40px;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        position: relative;
                        .tip {
                            position: absolute;
                            top: 8px;
                            left: -5px;
                            color: red;
                            width: 5px;
                        }

                        span {
                            width: 120px;
                        }
                        .imgBox {
                            display: flex;
                            justify-content: space-between;
                            flex-wrap: wrap;
                            img {
                                width: 120px;
                                height: 120px;
                                margin-right: 10px;
                            }
                        }
                    }
                }
                .table {
                    width: 95%;
                    margin: 0 auto 10px;
                }
            }
            .bottom {
                width: 100%;
                height: 70px;
                border: none;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .top::-webkit-scrollbar {
                width: 6px;
                height: 10px;
            }
            .top:hover {
                overflow-y: auto;
            }
            /*滚动槽*/
            .top::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                border-radius: 10px;
            }
            /* 滚动条滑块 */
            .top::-webkit-scrollbar-thumb {
                border-radius: 10px;
                background: rgba(0, 0, 0, 0.1);
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
            }
        }
    }
    /deep/.custom-tree-node {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
            width: 157px;
            display: flex;
            justify-content: flex-start;
            align-content: center;
        }
        .title {
            display: inline-block;
            width: 140px;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 5px;
        }
        .sub {
            width: 16px;
            height: 16px;
            background: var(--themeColor);
            color: #fff;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
        }
        .btn {
            margin-right: 10px;
            width: 35px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
.list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    span {
        width: 70px;
    }
}
.item2 {
    width: 380px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    height: 32px;
    position: relative;
    margin-right: 50px;
    span {
        width: 120px;
        margin-left: 10px;
    }
    .tip {
        position: absolute;
        color: red;
        font-size: 16px;
        left: -10px;
        top: 5px;
        width: 5px;
    }
}
.bottom {
    width: 96%;
    margin: 0 auto;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #f2f2f2;
}
.imp {
    width: 96%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
#container {
    height: 100%;
}
.msg {
    width: 96%;
    margin: 0 auto;
}
.searchAddress {
    width: 300px;
    position: absolute;
    top: 5px;
    left: 300px;
    display: flex;
    justify-content: space-between;
}
/deep/.imgBox .el-upload-list__item {
    transition: none !important;
}
/deep/.el-icon-circle-close {
    color: #fff;
}
/deep/.fileClass {
    display: flex;
    justify-content: flex-start;
}
.red {
    display: inline-block;
    background-color: rgba(255, 72, 72, 0.1);
    border-radius: 2px;
    border: 1px solid #ff4848;
    color: #ff4848;
    padding: 0 8px;
}
.green {
    display: inline-block;
    background-color: rgba(63, 207, 119, 0.1);
    border: 1px solid #28d79c;
    color: #3fcf77;
    border-radius: 2px;
    padding: 0 8px;
}
</style>
